<template lang="html">
  <div class="list">
    <h3>选择你想要的培训项目</h3>
    <div ref="scroll" class="scroll-list">
      <div class="scroll-content">
        <van-cell :border="false" v-for="(item,i) in quesList" :key="i" class="choose-list" :class="{active:i===active}" @click="listClick(item,i)" >
        <div class="tag" :class="renderTag(item)" />
        <p class="list-content" :style="GetLength(item.name)>1&&'line-height:0.5rem'">{{item.name.substring(0,20)}}</p>
        <div class="active-tap"/>
        </van-cell>
      </div>
    </div>
    <van-button type="danger" class="btn submit-button"  @click="submit" :loading="loading">确定</van-button>
    <van-popup v-model="show" get-container="#app">
      <div class="show-modal">
        <span class="close" @click="show = false">x</span>
        <p class="content" v-html="msg"/>
      </div>
    </van-popup>
  </div>
</template>
<script>
import BScroll from 'better-scroll'
import { mapGetters } from 'vuex'
import { log } from 'async'
import { join } from 'api'
export default {
  name: 'list',
  data() {
    return {
      active: -1,
      quesId: '',
      show: false,
      msg: '',
      loading: false,
      scroll: null
    }
  },
  computed: {
    ...mapGetters(['quesList'])
  },
  mounted() {
    this.scrollInit()
  },
  methods: {
    scrollInit() {
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.scroll, {
          probeType: 3,
          mouseWheel: true,
          click: true,
          tap: true
        })
      }
    },
    async submit() {
      if (this.active < 0) {
        this.$toast('未选择题目')
      } else {
        this.loading = true
        this.$store.commit('SET_QUES_STATUS', this.quesList[this.active])
        await join({
          id: this.quesList[this.active].id
        })
        await this.$store.dispatch('GetQues', {
          id: this.quesList[this.active].id
        })
        this.loading = false
        this.$router.push('/video')
      }
    },
    listClick(item, i) {
      this.active = i
      this.quesId = item.id
      if (item.status == 2) {
        this.$router.push({ path: 'exam', query: { ques: 0 } })
      } else if (item.status > 2) {
        this.msg =
          item.status == 4
            ? '恭喜您通过本次课程考试，<br/>可点击确定，<br/>复习本次视频课程。'
            : '十分遗憾您未通过本次课程考试，<br/>可点击确定，<br/>再次学习视频课程。'
        this.show = true
      }
    },
    renderTag(item) {
      return `tag_${item.status}`
    },
    GetLength(str) {
      let realLength = 0,
        len = str.length,
        charCode = -1
      for (var i = 0; i < len; i++) {
        charCode = str.charCodeAt(i)
        if (charCode >= 0 && charCode <= 128) realLength += 1
        else realLength += 2
      }
      return Math.ceil(realLength / 18)
    }
  }
}
</script>

<style lang="stylus">
.list
  padding 0 85.5px
  width 562px
  height 764px
  position absolute
  top 50%
  left 50%
  margin-left -281px
  margin-top -382px
  background url('../assets/img/container.png') center center no-repeat
  background-size contain
  box-sizing border-box

  h3
    font-size 30px
    color #b11d29
    text-align center
    margin-top 76px

  .submit-button
    position absolute
    bottom 1rem
    width 5.24rem

  .scroll-list
    height 460px
    overflow hidden
    margin-top 30px

    .choose-list
      background url('../assets/img/choose_list.png') center center no-repeat
      background-size cover
      margin 24px auto 0
      width 393px
      height 70px
      line-height 70px
      padding 0

      // &:first-of-type {
      // margin-top: 30px;
      // }

      // &:last-of-type
      // margin-bottom: 20px
      .active-tap
        width 50px
        height 50px
        position absolute
        background url('../assets/img/active-tap.png') center center no-repeat
        background-size cover
        right 23px
        top 11px
        transform scale(0)
        opacity 0

      &.active
        color #b11d29

        .active-tap
          transform scale(1)
          opacity 1
          transition all 0.3s ease

      .van-cell__value
        text-align center
        position relative

      .list-content
        display inline-block
        margin 0 auto
        width 280px
        padding-left 20px

      .tag
        width 65px
        height 65px
        position absolute
        left 0
        top 0

      .tag_0
        background url('../assets/img/tag_0.png') center center no-repeat
        background-size cover

      .tag_1
        background url('../assets/img/tag_1.png') center center no-repeat
        background-size cover

      .tag_2
        background url('../assets/img/tag_2.png') center center no-repeat
        background-size cover

      .tag_3
        background url('../assets/img/tag_3.png') center center no-repeat
        background-size cover

      .tag_4
        background url('../assets/img/tag_4.png') center center no-repeat
        background-size cover
</style>
